<script setup lang="ts">
    import { getTodoTaskListReq } from '@/api/todoTask'
    import { onMounted, ref, watch } from 'vue'
    import dayjs from 'dayjs'
    import TaskModal from '../Manage/TaskModal.vue'

    const showModal = ref(false)
    const editRecord = ref(null)

    const getDataList = async () => {
        const res = await getTodoTaskListReq({})
        if (res?.data?.length) {
            listItem.value.forEach((item: any) => {
                item.list = res.data
                    .filter((it: any) => it.status === item.status)
                    .sort((a: any, b: any) => {
                        return dayjs(b[item.time]).diff(dayjs(a[item.time]))
                    })
                    .slice(0, 12)
            })
        }
    }

    const listItem = ref([
        {
            id: 10001,
            title: '待开始',
            status: 0,
            time: 'assignTime',
            list: [] as any[],
        },
        {
            id: 10002,
            title: '进行中',
            status: 1,
            time: 'startTime',
            list: [] as any[],
        },
        {
            id: 10003,
            title: '已完成',
            status: 2,
            time: 'finishTime',
            list: [] as any[],
        },
    ])

    const handleClickTitle = (item: any) => {
        editRecord.value = item
        showModal.value = true
    }

    // 添加成功后更新数据
    watch(showModal, (val, oldVal) => {
        if (oldVal && !val) {
            editRecord.value = null
            getDataList()
        }
    })

    onMounted(() => {
        getDataList()
    })
</script>

<template>
    <div class="list-container">
        <div
            v-for="item in listItem"
            :key="item.id"
        >
            <div class="header">{{ item.title }}</div>
            <ul class="list-content">
                <li
                    v-for="it in item.list"
                    :key="it.id"
                >
                    <div
                        class="item-title"
                        @click="handleClickTitle(it)"
                        >{{ it.name }}</div
                    >
                    <div class="item-priority">优先级：{{ it.priority }}</div>
                    <div class="item-time">
                        {{ dayjs(it[item.time]).format('YYYY-MM-DD HH:mm:ss') }}
                    </div>
                </li>
            </ul>
        </div>
    </div>
    <!-- 模态框 -->
    <a-modal
        v-model:open="showModal"
        title="编辑"
        width="600px"
        :footer="null"
        destroyOnClose
    >
        <TaskModal
            :editRecord="editRecord"
            v-model="showModal"
        />
    </a-modal>
</template>

<style scoped lang="less">
    .list-container {
        width: 100%;
        height: 100%;
        padding: 20px 0;
        display: flex;
        justify-content: space-between;
        > div {
            background: linear-gradient(#171717, #2b2b2b) !important;
            border-radius: 6px;
            color: rgba(255, 255, 255, 1) !important;
            width: 32.5%;
            height: 100%;
            .header {
                font-family: 'yuesongFont';
                font-size: 20px;
                text-align: center;
                line-height: 40px;
                height: 40px;
                border-radius: 6px 6px 0 0;
                background: linear-gradient(
                    rgba(255, 255, 255, 0.1),
                    rgba(255, 255, 255, 0.1)
                );
                // color: rgba(255, 255, 255, 1) !important;
            }
            .list-content {
                padding: 0 20px;
                li {
                    height: 50px;
                    line-height: 50px;
                    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
                    &:last-child {
                        border-bottom: none;
                    }
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    .item-title {
                        width: 250px;
                        font-size: 18px;
                        cursor: pointer;
                        font-family: 'yuesongFont';
                        &:hover {
                            color: var(--color-blue);
                        }
                    }
                    .item-priority {
                        font-size: 12px;
                        width: 100px;
                        color: rgba(255, 255, 255, 0.5);
                    }
                    .item-time {
                        font-size: 14px;
                        color: rgba(255, 255, 255, 0.5);
                    }
                }
            }
        }
    }
</style>
